<template>
  <div class="step-one">
    <div class="title">
      填写前，建议您先在<span class="keywords">”入驻企业“</span
      >里搜索贵司名称，防止重复申请。
    </div>

    <m-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="170px"
      label-position="left"
    >
      <m-form-item prop="mer_name" label="企业名称（中文）：">
        <m-input v-model="formData.mer_name" style="display: inline-block; width: 531px" />
      </m-form-item>
      <m-form-item prop="mer_name_en" label="企业名称（英文）：">
        <m-input v-model="formData.mer_name_en" style="display: inline-block; width: 531px" />
      </m-form-item>
      <m-form-item prop="province" required label="企业所在地：">
        <v-distpicker
          class="addressChoose"
          @province="onChangeProvince"
          @city="onChangeCity"
          @area="onChangeArea"
          :province="formData.province"
          :city="formData.city"
          :area="formData.area"
        ></v-distpicker>
      </m-form-item>
      <m-form-item prop="address" label="请输入详细地址：">
        <m-input v-model="formData.address" style="display: inline-block; width: 531px" />
      </m-form-item>
      <m-form-item prop="name" label="联系人：">
        <m-input v-model="formData.name" style="display: inline-block; width: 265px" />
      </m-form-item>
      <m-form-item prop="position_str" label="职位：">
        <m-input v-model="formData.position_str" style="display: inline-block; width: 531px" />
      </m-form-item>
      <m-form-item prop="phone" label="联系方式：">
        <m-input v-model="formData.phone" style="display: inline-block; width: 531px" />
      </m-form-item>
      <m-form-item prop="mer_nature" label="公司性质：">
        <radio-group v-model="formData.mer_nature">
          <m-radio :label="0">国营</m-radio>
          <m-radio :label="1">外资</m-radio>
          <m-radio :label="2">合资</m-radio>
          <m-radio :label="3">民营</m-radio>
        </radio-group>
      </m-form-item>
    </m-form>
  </div>
</template>

<script>
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MInput from "@/components/common/m-input/MInput"
import MSelect from "@/components/common/m-select/MSelect"
import { RadioGroup } from "element-ui"
import MRadio from "@/components/common/m-radio/MRadio"
import MButton from "@/components/common/m-button/MButton"

export default {
  name: "StepOne",
  components: {
    MButton,
    MRadio,
    MSelect,
    MInput,
    MFormItem,
    MForm,
    RadioGroup
  },
  props: {
    formData: ""
  },
  data() {
    return {
      rules: {
        mer_name: [{ required: true, message: "请输入完整", trigger: "blur" }],
        province: [{ required: true, message: "请输入完整", trigger: "blur" }],
        city: [{ required: true, message: "请输入完整", trigger: "blur" }],
        address: [{ required: true, message: "请输入完整", trigger: "blur" }],
        name: [{ required: true, message: "请输入完整", trigger: "blur" }],
        position_str: [{ required: true, message: "请输入完整", trigger: "blur" }],
        phone: [{ required: true, message: "请输入完整", trigger: "blur" }],
        mer_nature: [{ required: true, message: "请输入完整", trigger: "blur" }]
      }
    }
  },
  methods: {
    onChangeProvince(e) {
      this.formData.province = e.value
    },
    onChangeCity(e) {
      this.formData.city = e.value
    },
    onChangeArea(e) {
      this.formData.area = e.value
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.step-one {
  width: 750px;

  .title {
    font-size: 16px;
    margin-bottom: 50px;

    .keywords {
      color: $theme-color-1;
    }
  }
  .addressChoose {
    width: 531px;
    display: flex;
    justify-content: space-between;
  }
  /deep/ .addressChoose label {
    display: block;
    width: 32%;
  }
  /deep/ .addressChoose select {
    display: block;
    width: 100%;
    background-color: #f3f4f8;
    border-radius: 10px;
    border-color: #e9e9e9;
    height: 45px;
    line-height: 43px;
  }
}
</style>
